<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="/callimachus/template.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Statistics</title>
    <script src="https://www.google.com/jsapi" type="text/javascript"> </script>
	<script type="text/javascript">
		google.load("visualization", "1", {callback: function(){
			var chart = new google.visualization.ChartWrapper({
                dataSourceUrl:"organizations-by-country.rq",
                options:{
                    height:300,
                    colorAxis: {colors: ['green', 'blue']}
                },
                state:{},
                chartType:"GeoChart"
    		});
			chart.setContainerId("chart1");
			chart.draw();
		}});
	</script>
	<script type="text/javascript">
		google.load("visualization", "1", {callback: function(){
			var chart = new google.visualization.ChartWrapper({
                dataSourceUrl:"projects-by-country.rq",
                options:{
                    height:300,
                    colorAxis: {colors: ['green', 'blue']}
                },
                state:{},
                chartType:"GeoChart"
        	});
			chart.setContainerId("chart2");
			chart.draw();
		}});
	</script>
    <script type="text/javascript">
		google.load("visualization", "1", {callback: function(){
			var chart = new google.visualization.ChartWrapper({"dataSourceUrl":"projects-by-organization-type.rq","options":{"hasLabelsColumn":true,"is3D":false,"hAxis":{"maxAlternations":1},"colors":["#3366CC","#DC3912","#FF9900","#109618","#990099","#0099C6","#DD4477","#66AA00","#B82E2E","#316395","#994499","#22AA99","#AAAA11","#6633CC","#E67300","#8B0707","#651067","#329262","#5574A6","#3B3EAC","#B77322","#16D620","#B91383","#F4359E","#9C5935","#A9C413","#2A778D","#668D1C","#BEA413","#0C5922","#743411"],"height":300},"state":{},"chartType":"PieChart"});
			chart.setContainerId("chart3");
			chart.draw();
		}});
	</script>
    <script type="text/javascript">
		google.load("visualization", "1", {callback: function(){
			var chart = new google.visualization.ChartWrapper({"dataSourceUrl":"projects-by-industry.rq","options":{"hasLabelsColumn":true,"is3D":false,"hAxis":{"maxAlternations":1},"colors":["#3366CC","#DC3912","#FF9900","#109618","#990099","#0099C6","#DD4477","#66AA00","#B82E2E","#316395","#994499","#22AA99","#AAAA11","#6633CC","#E67300","#8B0707","#651067","#329262","#5574A6","#3B3EAC","#B77322","#16D620","#B91383","#F4359E","#9C5935","#A9C413","#2A778D","#668D1C","#BEA413","#0C5922","#743411"],"height":300},"state":{},"chartType":"PieChart"});
			chart.setContainerId("chart4");
			chart.draw();
		}});
	</script>
</head>
<body>
	<h1>Statistics</h1>
    <div class="hbox">
        <div>
    	    <h2>Organizations by Country</h2>
            <div id="chart1" class="chart" style="height:300px;width:400px"></div>
        </div>
        <div>
            <h2>Projects by Country</h2>
            <div id="chart2" class="chart" style="height:300px;width:400px"></div>
        </div>
        <div>
            <h2>Projects by Type of Organization</h2>
            <div id="chart3" class="chart" style="height:300px;width:400px"></div>
        </div>
        <div>
            <h2>Projects by Industry or Domain Category</h2>
            <div id="chart4" class="chart" style="height:300px;width:400px"></div>
        </div>
    </div>
</body>
</html>